import * as echarts from 'echarts'

var color = ['#139BB1', '#484DF9', '#F5B54A']
var name = ['进客量', '出客量', '保有量']
var data = [
  [13.7, 3.4, 13.5, 16.1, 7.4, 15.2],
  [17.4, 13.7, 13.5, 3.4, 15.2, 13.5],
  [13.4, 7.4, 13.7, 13.5, 16.1, 13.7],
  [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
  [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
  [17.4, 6.1, 13.4, 15.2, 13.7, 5.2]
]

var series = []
for (var i = 0; i < 3; i++) {
  series.push({
    name: name[i],
    type: 'line',
    symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
    symbol: 'circle', //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: color[i]
            },
            {
              offset: 0.8,
              color: 'rgba(255,255,255,0)'
            }
          ],
          false
        ),
        // shadowColor: 'rgba(255,255,255, 0.1)',
        shadowBlur: 10,
        opacity: 0.3
      }
    },
    itemStyle: {
      normal: {
        color: color[i],
        lineStyle: {
          width: 1,
          type: 'solid' //'dotted'虚线 'solid'实线
        },
        borderColor: color[i], //图形的描边颜色。支持的格式同 color
        borderWidth: 8, //描边线宽。为 0 时无描边。[ default: 0 ]
        barBorderRadius: 0,
        label: {
          show: false
        },
        opacity: 0.5
      }
    },
    data: data[i]
  })
}
export const RightBottomOption = {
  backgroundColor: 'transparent',
  legend: {
    top: 20,
    textStyle: {
      color: '#fff',
      fontSize: '10'
    },
    data: name
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'line', // 默认为直线，可选为：'line' | 'shadow'
      lineStyle: {
        color: '#57617B'
      }
    },
    formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%',
    padding: [8, 10], //内边距
    extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);' //添加阴影
  },
  grid: {
    borderWidth: 0,
    left: '2%',
    right: '2%',
    top: '10%',
    bottom: '2%',
    textStyle: {
      color: '#fff'
    }
  },
  xAxis: [
    {
      type: 'category',
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
      axisTick: {
        show: false
      },
      splitArea: {
        show: false
      },
      axisLabel: {
        inside: false
      },
      data: ['06:00', '12:00', '14:00', '16:00', '18:00', '20:00']
    }
  ],
  yAxis: {
    type: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: '#32346c '
      }
    },
    axisLabel: {
      show: false
    }
  },
  series: series
}
